<template>
  <view class="wrap">
    <!-- #ifdef WEB -->
    <uv-navbar title="社群介绍" placeholder leftIcon=''></uv-navbar>
    <view class="appNav">
      <view class="left">
        <view class="logo"><image src="../../static/logo.png" class="img"></image></view>
        <view class="name">投研宝</view>
      </view>
      <button hover-class="none" class="btn" @click="goApp">去app查看</button>
    </view>
    <uv-line color="#EFEFEF"></uv-line>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <uv-navbar title="" placeholder autoBack>
      <template v-slot:left>
        <view class="navImg">
          <image src="../../static/left.png" class="leftImg"></image>
        </view>
      </template>
    </uv-navbar>
    <!-- #endif -->
    <view class="box">
      <view class="info">
        <view class="left">
          <view class="title">{{ body.name }}</view>
          <view class="number">社群号：{{ body.id }}</view>
          <view class="tab">
            <view class="terest" v-for="(item, index) in body.tag" :key="index">{{ item.name }}</view>
          </view>
        </view>
        <view class="right">
          <image :src="setUrl(body.logo_image)" class="img" mode="aspectFill"></image>
        </view>
      </view>
      <view class="statist">
        <view class="list">
          <view class="item">
            <view class="number">{{ thous(body.theme_count) }}</view>
            <view class="font">主题</view>
          </view>
          <view class="item">
            <view class="number">{{ thous(body.member_count) }}</view>
            <view class="font">成员</view>
          </view>
          <view class="item">
            <view class="number">{{ thous(body.essence_count) }}</view>
            <view class="font">精华</view>
          </view>
          <view class="item">
            <view class="number">{{ thous(body.question_count) }}</view>
            <view class="font">问答</view>
          </view>
        </view>
      </view>
      <view class="introduce">
        <view class="title">社群介绍</view>
        <view class="content">{{ body.desc }}</view>
        <template v-if="body.poster_images">
          <view class="picture" v-for="(item,index) in body.poster_images.split(',')" :key='index'>
            <image :src="setUrl(item)" mode="widthFix" class="img"></image>
          </view>
        </template>
      </view>
      <view class="owner" v-if="body.user" @click="goTheme(body.user.id)">
        <view class="avatar">
          <image :src="setUrl(body.user.avatar)" class="img" mode="aspectFill"></image>
          <image src="../../static/vip.png" class="vip"></image>
        </view>
        <view class="right">
          <view class="name">群主：{{ body.user.nickname }}</view>
          <view class="fo">创建{{ timeDay }}天</view>
        </view>
      </view>
      <view class="part" v-if="member.cooperate.length">
        <view class="partnership">
          <view class="title">合伙人（{{ member.cooperate.length }}）</view>
          <uv-scroll-list :indicator="false">
            <view class="scroll" v-for="(item, index) in member.cooperate" :key="index" @click="goTheme(item.user_id)">
              <avatar :src="setUrl(item.avatar)" styles='width: 70rpx; height: 70rpx;margin: 0 auto;'></avatar>
              <view class="name">{{ item.nickname }}</view>
            </view>
          </uv-scroll-list>
        </view>
      </view>
      <view class="part" v-if="member.guest.length">
        <view class="partnership">
          <view class="title">嘉宾（{{ member.guest.length }}）</view>
          <uv-scroll-list :indicator="false">
            <view class="scroll" v-for="(item, index) in member.guest" :key="index" @click="goTheme(item.user_id)">
              <avatar :src="setUrl(item.avatar)" styles='width: 70rpx; height: 70rpx;margin: 0 auto;'></avatar>
              <view class="name">{{ item.nickname }}</view>
            </view>
          </uv-scroll-list>
        </view>
      </view>
      <view class="notice" v-if="body.type != 1">
        <view class="hd">
          <view class="title">付费须知</view>
          <view class="price" v-if="body.coin != 0">投研币{{ body.coin }}</view>
          <view class="price" v-else>限时免费</view>
        </view>
        <view class="content">
          <view class="test">1.付费后，你可以使用当前付款的投研宝账号登录【群组名称】参与互动。
          有效期: {{ timeFormat(new Date().getTime(), 'yyyy-mm-dd') }} 至 {{ timeFormat(body.expiretime, 'yyyy-mm-dd') }}</view>
          <view class="test">2.加入群组后，72小时内可申请退款。超过 72小时后如果产生退款，手续费不予退还。如有争议，参见:《投研宝用户协议》和《付款及退款规则》</view>
          <view class="test">3.本社群由群主自行创建，加入前请确认风险，投研宝平台不提供相关保证。若发现违法违规的社群,请勿加入并投诉。</view>
        </view>
      </view>
      <template v-if="themeList.length">
        <view class="theme">
          <view class="bigTitle">部分主题预览</view>
          <view class="list">
            <theme :detail='item' v-for="(item, index) in themeList" :key="index" :isClick='false' :read='false' :foot='false' :order='false'></theme>
          </view>
        </view>
        <view class="more">加入社群查看更多内容</view>
      </template>
    </view>
    <!-- #ifdef WEB -->
    <view class="footer">
      <view class="pox">
        <view class="left">
          <view class="color">限时免费</view>
        </view>
        <button class="btn" hover-class="none" @click="goApp">立即加入</button>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view class="footer">
      <view class="pox" v-if="body.apply && body.apply.examine_status == 0">
        <button class="btn w100" hover-class="none" disabled>群主审核中，请耐心等待</button>
      </view>
      <view class="pox" v-else>
        <view class="left">
          <template v-if="body.coin != 0">
            <view class="font">本期低至<text class="color">{{ body.day_coin }}币/天</text></view>
            <view class="desc">有效期{{ dateLength }}</view>
          </template>
          <view class="color" v-else>限时免费</view>
        </view>
        <button class="btn" hover-class="none" @click="openJion">
          <template v-if="body.coin != 0">
            投研币{{ body.coin }}
          </template>
          <template v-else>
            立即加入
          </template>
          <!-- 立即加入 -->
        </button>
      </view>
      
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <!-- #endif -->
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <uv-popup ref="popup" mode='bottom' bgColor='#FFFFFF' round='40rpx' closeable safeAreaInsetBottom closeOnClickOverlay>
      <view class="ws">
        <view class="bigs">申请加入社群</view>
        <view class="testArea">
          <uv-textarea v-model="content" placeholder="请输入内容" border='none' height='260rpx' placeholderStyle='font-weight: 400; font-size: 28rpx; color: #B8B8B8;' :textStyle="{color: '#000', fontSize: '28rpx'}" :customStyle="{backgroundColor: '#F5F5F5'}"></uv-textarea>
        </view>
        <view class="safPopup">
          <button class="btn" hover-class="none" @click="keyUp">确认</button>
        </view>
      </view>
    </uv-popup>
    <uv-modal ref="modal" title="提示">
      <view class="slot-content">
        {{msg}}
      </view>
    </uv-modal>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { post } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { thous, toast, getGroup, setUrl, getDates, division, mul } from '@/common';
import { useOrder } from '@/store';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import theme from '../../components/group/theme.vue';

const popup = ref(null);
const modal = ref(null);

let id = '';
let ship = ref([]);
let guest = ref([]);
let content = ref('');
let member = ref({
  cooperate: [],
  guest: []
});
let msg = ref('');
let themeList = ref([]);
let body = computed(() => {
  const store = useOrder();
  return store.group;
});
let timeDay = computed(() => {
  const day = getDates(timeFormat(body.value.createtime, 'yyyy/mm/dd'), new Date().getTime());
  return day == 0 ? 1 : day;
})
let dateLength = computed(() => {
  let n = '';
  if(body.value.pay_expiration == 4) n = '1年';
  if(body.value.pay_expiration == 3) n = '6个月';
  if(body.value.pay_expiration == 2) n = '3个月';
  if(body.value.pay_expiration == 1) n = '1个月';
  return n
})

onLoad((option) => {
  id = option.id;
  getGroup(id);
  getGroupMember();
  getTheme();
})

function keyUp(){
  if(uni.$uv.test.empty(content.value)) return toast('请输入申请原因');
  // 免费社群或收费0投研币的社群,不进入收银台
  if(body.value.type == 1 || body.value.coin == 0){
    post("api/association/applyAssociation", { association_id: id, content: content.value }).then(res => {
      popup.value.close();
      if(res.code == 1){
        toast('申请成功');
        getGroup(id);
        if(body.value.is_exempt == 1){
          setTimeout(() => {
            uni.redirectTo({
            	url: '/pages/group/yes-detail?id=' + id
            });
          }, 1000)
        }
      }
    })
  }else{
    popup.value.close();
    uni.navigateTo({
      url: `/pages/group/cashier?content=${content.value}`
    });
  }
}
function getGroupMember(){
  const params = {
    association_id: id,
    page: 1,
    limit: 100
  }
  post('api/association_member/getAssociationMemberList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      let cooperate = [];
      let guest = [];
      data.forEach(e => {
        if(e.identity == 2){
          cooperate.push(e);
        }
        if(e.identity == 3){
          guest.push(e);
        }
      })
      member.value = {
        cooperate,
        guest
      }
    }
  })
}
function getTheme(){
  const params = {
    page: 1,
    limit: 10,
    is_best: 1,
    association_id: id
  }
  post('api/association_theme/getAssociationThemeList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      themeList.value = data;
    }
  })
}
function getFutureDate() {
  var today = new Date();
  var date = new Date(today);  
  date.setDate(date.getDate() + (body.value.pay_expiration * 3 * 30));  
  return date.getTime();  
}
// 跳转app
function goApp(){
  // #ifdef WEB
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('micromessenger') !== -1) {
    msg = '请点击右上角，在浏览器打开';
    modal.value.open();
  } else {
    let route = `/pages/group/not-detail?id=${id}`
    location.href = 'touyanbao://' + route
    noApp();
  }
  // #endif
}
// 无响应或者没安装跳转下载
let timer = null;
function noApp() {
	console.log("===========》noApp");
	var t = Date.now(),
		r = 'https://www.xcxwo.com/QfvDcS';
	timer = setTimeout(function() {
    console.log(document.hidden);
    console.log(document.webkitHidden);
		return Date.now() - t > 3200 ? (clearTimeout(timer), !1) : !document.webkitHidden &&!document.hidden &&void(location.href = r);
	}, 3000);
}
function goTheme(id){
  uni.navigateTo({
    url: `/pages/mine/myTheme/index?id=${id}`
  });
}
function openJion(){
  popup.value.open();
}
</script>

<style lang="scss" scoped>
  .appNav{
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .logo{
        width: 60rpx;
        height: 60rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
      .name{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-left: 20rpx;
      }
    }
    .btn{
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
  .ws{
    padding: 0 30rpx;
    .safPopup{
      padding-top: 50rpx;
      padding-bottom: 30rpx;
      .btn{
        font-size: 34rpx;
      }
    }
    .testArea{
      width: 100%;
      height: calc(260rpx + 18px);
    }
    .bigs{
      font-weight: 500;
      font-size: 36rpx;
      color: #2B2B2B;
      text-align: center;
      padding-top: 40rpx;
      padding-bottom: 30rpx;
    }
  }
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #F5F5F5;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .pox{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        .desc{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          padding-top: 8rpx;
        }
        .font{
          color: #2b2b2b;
          font-size: 28rpx;
          font-weight: 500;
        }
        .color{
          color: #e43222;
        }
      }
      .btn{
        font-size: 34rpx;
        width: 360rpx;
        &.w100{
          width: 100%;
        }
      }
    }
  }
  .box{
    background-color: #F5F5F5;
    .more{
      text-align: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      padding: 40rpx 0;
    }
    .theme{
      padding: 0 30rpx;
      background-color: #fff;
      padding-top: 56rpx;
      .list{
        .item{
          padding-top: 40rpx;
          padding-bottom: 30rpx;
          border-bottom: 1px solid #EFEFEF;
          .picture{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding-top: 16rpx;
            .environ{
              width: 32%;
              height: 200rpx;
              margin-right: 1%;
              margin-bottom: 1%;
              border-radius: 12rpx;
              overflow: hidden;
            }
            .environ:nth-child(1):nth-last-child(2),
            .environ:nth-child(2):nth-last-child(1),
            .environ:nth-child(1):nth-last-child(3),
            .environ:nth-child(2):nth-last-child(2),
            .environ:nth-child(3):nth-last-child(1) {
                width: 32%;
            }
            
            .environ:nth-child(1):nth-last-child(4),
            .environ:nth-child(2):nth-last-child(3),
            .environ:nth-child(3):nth-last-child(2),
            .environ:nth-child(4):nth-last-child(1) {
                width: 49%;
                height: 300rpx;
            }
          }
          .content{
            font-weight: 400;
            font-size: 30rpx;
            color: #2B2B2B;
          }
          .topic{
            width: 100%;
            padding-top: 25rpx;
            padding-bottom: 8rpx;
            display: flex;
            flex-wrap: wrap;
            .test{
              font-weight: 400;
              font-size: 30rpx;
              color: #465B89;
              margin-right: 20rpx;
            }
          }
          .hd{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
              display: flex;
              align-items: center;
              .fo{
                padding-left: 20rpx;
                .time{
                  font-weight: 400;
                  font-size: 22rpx;
                  color: #999999;
                }
                .name{
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #2B2B2B;
                }
              }
              .avatar{
                width: 70rpx;
                height: 70rpx;
                position: relative;
                .img{
                  border-radius: 50%;
                  overflow: hidden;
                }
                .vip{
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  width: 28rpx;
                  height: 28rpx;
                }
              }
            }
            .right{
              font-weight: 400;
              font-size: 24rpx;
              color: #BF971E;
              width: 96rpx;
              height: 48rpx;
              background: #FFF7DE;
              border-radius: 48rpx;
              line-height: 48rpx;
              text-align: center;
            }
          }
        }
      }
      .bigTitle{
        font-weight: 500;
        font-size: 36rpx;
        color: #2B2B2B;
      }
    }
    .notice{
      padding: 0 30rpx;
      background-color: #fff;
      padding-top: 60rpx;
      .content{
        padding-bottom: 50rpx;
        border-bottom: 1px solid #EFEFEF;
        .test{
          font-weight: 400;
          font-size: 28rpx;
          color: #737373;
          padding-bottom: 30rpx;
          &:last-child{
            padding-bottom: 0;
          }
        }
      }
      .hd{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 15rpx;
        .price{
          font-weight: 500;
          font-size: 32rpx;
          color: #E43222;
        }
        .title{
          font-weight: 500;
          font-size: 36rpx;
          color: #2B2B2B;
        }
      }
    }
    .part{
      padding: 0 30rpx;
      background-color: #fff;
      .partnership{
        padding-bottom: 50rpx;
        &.border{
          border-bottom: 1px solid #EFEFEF;
        }
        .scroll{
          margin-right: 60rpx;
          &:last-child{
            margin-right: 0;
          }
          .name{
            font-weight: 400;
            font-size: 22rpx;
            color: #737373;
            text-align: center;
            padding-top: 4rpx;
          }
        }
        .title{
          font-weight: 500;
          font-size: 32rpx;
          color: #2B2B2B;
          padding-bottom: 16rpx;
        }
      }
    }
    .owner{
      padding: 0 30rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding-bottom: 60rpx;
      .right{
        padding-left: 20rpx;
        .fo{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          padding-top: 8rpx;
        }
        .name{
          font-weight: 500;
          font-size: 32rpx;
          color: #2B2B2B;
        }
      }
      .avatar{
        position: relative;
        width: 100rpx;
        height: 100rpx;
        .vip{
          position: absolute;
          right: 0;
          bottom: 0;
          width: 28rpx;
          height: 28rpx;
        }
        .img{
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }
    .introduce{
      padding: 40rpx 30rpx;
      background-color: #fff;
      .content{
        font-weight: 400;
        font-size: 28rpx;
        color: #737373;
        padding-top: 15rpx;
        padding-bottom: 15rpx;
      }
      .title{
        font-weight: 500;
        font-size: 36rpx;
        color: #2B2B2B;
      }
    }
    .statist{
      padding: 0 30rpx;
      background-color: #fff;
      padding-top: 48rpx;
      .list{
        padding: 32rpx 0;
        border-top: 1px solid #EFEFEF;
        border-bottom: 1px solid #EFEFEF;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .item{
          border-right: 1px solid #EFEFEF;
          flex: 1;
          &:last-child{
            border-right: 0;
          }
          .font{
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
            text-align: center;
          }
          .number{
            font-weight: 500;
            font-size: 32rpx;
            color: #2B2B2B;
            text-align: center;
          }
        }
      }
    }
    .info{
      padding: 0 30rpx;
      padding-top: 40rpx;
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      .left{
        flex: 1;
        width: 0;
        .tab{
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          padding-top: 24rpx;
          .terest{
            font-weight: 400;
            font-size: 24rpx;
            color: #2B2B2B;
            padding: 0 24rpx;
            height: 48rpx;
            line-height: 48rpx;
            background: #F5F5F5;
            border-radius: 48rpx;
            margin-right: 8rpx;
            margin-bottom: 8rpx;
          }
        }
        .number{
          padding-top: 8rpx;
          font-weight: 400;
          font-size: 28rpx;
          color: #999999;
        }
        .title{
          font-weight: 500;
          font-size: 48rpx;
          color: #2B2B2B;
        }
      }
      .right{
        width: 150rpx;
        height: 150rpx;
        border-radius: 12rpx;
        overflow: hidden;
      }
    }
  }
  .navImg{
    width: 36rpx;
    height: 36rpx;
    .rightImg{
      width: 100%;
      height: 100%;
    }
    .leftImg{
      width: 20rpx;
      height: 36rpx;
    }
  }
</style>